<template>
  <view class="container">
    <view class="header">
      <text>账号密码登录</text>
    </view>
    <view class="input-group">
      <view class="input-wrapper">
        <text class="country-code">+86></text>
        <input type="text" v-model="phone" placeholder="请输入手机号" class="input" />
      </view>
      <input type="password" v-model="password" placeholder="请输入密码" class="input" />
    </view>
    <button class="login-button" @click="login">登录</button>
    <view class="forgot-password">
      <text>忘记密码?</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '', // 绑定手机号输入
      password: '' // 绑定密码输入
    };
  },
  methods: {
      login() {
        wx.request({
          url: 'http://127.0.0.1:8400/user/phoneLogin',
          method: 'POST',
          data: {
            accountName: this.phone,
            password: this.password
          },
          header: {
            'Content-Type': 'application/json'
          },
          success: (res) => {
            if (res.data.code==200) {
              // 假设登录成功后返回的数据中有一个字段表示成功
			  console.log('登录成功，准备跳转');
              uni.navigateTo({
                url: '/pages/home/OwnerHome'
              });
            } else {
              // 处理登录失败的情况
              wx.showToast({
                title: '登录失败，请检查您的手机号和密码。',
                icon: 'none'
              });
            }
          },
          fail: (err) => {
            console.error('登录请求出错:', err);
            wx.showToast({
              title: '请求失败，请稍后重试。',
              icon: 'none'
            });
          }
        });
      }
    }

};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  height: 100vh;
  justify-content: center;
}

.header {
  font-size: 24px;
  margin-bottom: 30px;
}

.input-group {
  width: 80%;
  margin-bottom: 20px;
}

.input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.country-code {
  margin-right: 10px;
  color: #999;
}

.input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}

.login-button {
  width: 80%;
  padding: 10px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  text-align: center;
  margin-top: 20px;
}

.forgot-password {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
}
</style>